<template>
  <el-card shadow="never" class="service-card">
    <template #header>
      <div class="card-header">
        <h3 class="text-lg font-bold">服务发布</h3>
        <div class="service-actions" v-if="!loadingServices">
          <span class="mr-3 text-gray-600">总计: {{ services.length }} 个服务</span>
          <el-button type="primary" @click="handlePublishService()">
            发布服务
          </el-button>
        </div>
      </div>
    </template>

    <div class="service-content">
      <div v-if="loadingServices" class="text-center py-2">
        <el-skeleton :rows="1" animated />
      </div>
      <div v-else-if="services.length === 0" class="text-center py-4 flex-1 flex items-center justify-center">
        <el-empty description="暂无服务" :image-size="60">
          <template #description>
            <p class="text-gray-500">还没有发布服务，点击上方按钮发布</p>
          </template>
        </el-empty>
      </div>
      <div v-else class="service-table-container">
        <el-table :data="services" style="width: 100%" size="small" class="service-table" max-height="198px"
          :header-cell-style="{ backgroundColor: '#f5f7fa', color: '#606266', fontWeight: 'bold' }">
          <el-table-column type="index" label="序号" width="60" align="center">
            <template #default="scope">
              {{ scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column label="名称" width="80" show-overflow-tooltip>
            <template #default="scope">
              {{ scope.row.name }}
            </template>
          </el-table-column>
          <el-table-column prop="status" label="状态" width="80">
            <template #default="scope">
              <el-tag :type="getStatusType(scope.row.status)" size="small">
                {{ getStatusText(scope.row.status) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="is_public" label="公开" width="50">
            <template #default="scope">
              <el-tag :type="scope.row.is_public ? 'success' : 'warning'" size="small">
                {{ scope.row.is_public ? '是' : '否' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="sse_url" label="SSE URL" min-width="220">
            <template #default="scope">
              <div class="flex items-center">
                <el-tooltip :content="scope.row.sse_url" placement="top" :show-after="500">
                  <el-input v-model="scope.row.sse_url" readonly size="small" class="flex-1 mr-1"
                    :title="scope.row.sse_url" disabled />
                </el-tooltip>
                <el-button type="primary" circle size="small" @click="copyUrl(scope.row.sse_url)" title="复制URL">
                  <el-icon>
                    <DocumentCopy />
                  </el-icon>
                </el-button>
                <el-button type="success" circle size="small" @click="copyAsEgovakbUrl(scope.row.sse_url)" title="复制为egovakb格式">
                  <el-icon>
                    <Connection />
                  </el-icon>
                </el-button>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="created_at" label="创建时间" width="140" />
          <el-table-column fixed="right" label="操作" width="200">
            <template #default="scope">
              <div v-if="scope.row.can_edit">
                <el-button v-if="scope.row.status === 'running'" type="info" size="small"
                  @click="handleStopService(scope.row.service_uuid)">
                  停止
                </el-button>
                <el-button v-else-if="scope.row.status === 'stopped'" type="success" size="small"
                  @click="handleStartService(scope.row.service_uuid)">
                  启动
                </el-button>
                <el-button v-else-if="scope.row.status === 'error'" type="warning" size="small"
                  @click="handleStartService(scope.row.service_uuid)">
                  重启
                </el-button>
                <el-button type="primary" size="small" @click="viewServiceParams(scope.row)" title="查看参数">
                  参数
                </el-button>
                <el-button type="danger" size="small" @click="handleUninstallService(scope.row.service_uuid)">
                  卸载
                </el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </el-card>
</template>

<script lang="ts" setup>
import { defineProps, defineEmits } from 'vue'
import { DocumentCopy, Connection } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { copyTextToClipboard } from '@/utils/copy'
import type { McpServiceInfo } from '@/api/type/mcp-service'

const props = defineProps<{
  moduleId: number
  services: McpServiceInfo[]
  loadingServices: boolean
}>()

const emit = defineEmits<{
  (e: 'publishService'): void
  (e: 'uninstallService', uuid: string): void
  (e: 'stopService', uuid: string): void
  (e: 'startService', uuid: string): void
  (e: 'viewServiceParams', service: McpServiceInfo): void
}>()

// 获取状态类型
const getStatusType = (status: string) => {
  switch (status) {
    case 'running':
      return 'success'
    case 'stopped':
      return 'warning'
    case 'error':
      return 'danger'
    default:
      return 'info'
  }
}

// 获取状态文本
const getStatusText = (status: string) => {
  switch (status) {
    case 'running':
      return '运行中'
    case 'stopped':
      return '已停止'
    case 'error':
      return '错误'
    default:
      return status
  }
}

// 复制URL到剪贴板
const copyUrl = (url: string) => {
  copyTextToClipboard(url, 'URL已复制到剪贴板')
}

// 复制为egovakb格式的URL
const copyAsEgovakbUrl = (url: string) => {
  // 创建egovakb格式的JSON
  const egovakbFormat = JSON.stringify({
    "mcp-sse": {
      "url": url,
      "transport": "sse"
    }
  }, null, 2)
  
  // 复制到剪贴板
  copyTextToClipboard(egovakbFormat, 'egovakb格式URL已复制到剪贴板')
}

// 处理发布服务
const handlePublishService = () => {
  emit('publishService')
}

// 卸载服务
const handleUninstallService = (serviceUuid: string) => {
  emit('uninstallService', serviceUuid)
}

// 停止服务
const handleStopService = (serviceUuid: string) => {
  emit('stopService', serviceUuid)
}

// 启动服务
const handleStartService = (serviceUuid: string) => {
  emit('startService', serviceUuid)
}

// 查看服务参数
const viewServiceParams = (service: McpServiceInfo) => {
  emit('viewServiceParams', service)
}
</script>

<style scoped>
.service-card {
  border-radius: 0px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06) !important;
  border: 1px solid rgba(235, 235, 235, 0.8);
  transition: all 0.3s ease;
  overflow: hidden;
  background: linear-gradient(135deg, #ffffff, #f8f9ff);
  height: 100%;
  display: flex;
  flex-direction: column;
}

.service-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
}

.service-table-container {
  flex: 1;
  overflow: auto;
}

.service-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1) !important;
  transform: translateY(-2px);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.service-actions {
  display: flex;
  align-items: center;
}

.service-table {
  margin-top: 8px;
}
</style> 